<template>
  <el-dialog
    v-model="dialogVisible"
    title="查看参数"
    width="600px"
    class="custom-dialog"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <el-descriptions :column="1" border class="custom-descriptions">
      <el-descriptions-item label="产品编号">
        {{ formData.productNo || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="配置的字段">
        <div v-if="configList.length > 0">
          <el-tag v-for="(config, index) in configList" :key="index" size="medium" style="margin-right: 8px; margin-bottom: 8px;">
            {{ config }}
          </el-tag>
        </div>
        <span v-else>-</span>
      </el-descriptions-item>
    </el-descriptions>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, watch } from 'vue';

// Props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => ({})
  }
});

// Emits
const emit = defineEmits(['update:visible', 'close']);

// 对话框可见性
const dialogVisible = computed({
  get: () => props.visible,
  set: (val) => emit('update:visible', val)
});

// 表单数据
const formData = ref({
  productNo: '',
  configName: ''
});

// 配置列表
const configList = computed(() => {
  if (formData.value.configName) {
    return formData.value.configName.split('、').filter(item => item.trim());
  }
  return [];
});

// 监听行数据变化
watch(() => props.rowData, (newData) => {
  if (newData && Object.keys(newData).length > 0) {
    formData.value = {
      productNo: newData.productNo || '',
      configName: newData.configName || ''
    };
  }
}, { deep: true, immediate: true });

// 处理关闭
const handleClose = () => {
  emit('update:visible', false);
  emit('close');
};
</script>

<style scoped>
/* 对话框样式 */
:deep(.custom-dialog .el-dialog__header) {
  background-color: #f5f7fa;
  padding: 16px 20px;
  border-bottom: 1px solid #ebeef5;
}

:deep(.custom-dialog .el-dialog__title) {
  font-size: 16px;
  font-weight: 500;
}

:deep(.custom-dialog .el-dialog__body) {
  padding: 20px;
  max-height: 70vh;
  overflow-y: auto;
}

:deep(.custom-dialog .el-dialog__footer) {
  padding: 16px 20px;
  border-top: 1px solid #ebeef5;
  background-color: #fafafa;
}

/* 自定义描述列表样式 */
.custom-descriptions {
  width: 100%;
}

:deep(.custom-descriptions .el-descriptions__item) {
  display: flex;
  align-items: flex-start;
}

:deep(.custom-descriptions .el-descriptions__label) {
  width: 140px;
  font-weight: 500;
  color: #606266;
  text-align: left;
  background-color: #f5f7fa;
  padding: 18px 20px;
  border-right: 1px solid #ebeef5;
  min-height: 80px;
  display: flex;
  align-items: center;
}

:deep(.custom-descriptions .el-descriptions__content) {
  flex: 1;
  color: #303133;
  padding: 18px 20px;
  background-color: #ffffff;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* 对话框底部按钮 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}

/* 确保单元格边框正确显示 */
:deep(.custom-descriptions .el-descriptions__cell) {
  padding: 6px !important;
  border-bottom: 1px solid #ebeef5;
}

:deep(.custom-descriptions .el-descriptions__row:last-child .el-descriptions__cell) {
  border-bottom: none;
}
</style>